<template>
  <a-spin :spinning="uploading" tip="上传中...">
    <div class="uplaodBoxB page-miH page-bgBack">
      <a-row class="head">
        <div style="cursor: pointer;" @click="isGoBack">
          <a-icon type="left" />
          <div class="left2">返回</div>
        </div>
        <a-col class="title">
          <strong>批量导入渠道</strong>
        </a-col>
      </a-row>
      <div class="ant-upload-select-text-box" style="padding-top: 24px" v-if="!callback">
        <a-upload ref="upload" :file-list="fileList" :remove="handleRemove" :before-upload="beforeUpload">
          <img :src="uploadImg" style="width: 139px;height: 106px" />
          <div class="ant-modal-body">
            <div style="font-size: 12px;color: #666;">
              点击添加文件或将文件拖拽到此处
            </div>
            <div style="font-size: 12px;color: #999">
              (文件大小不超过5M)
            </div>
          </div>
          <a-button style="margin-bottom:15px" type="primary"><a-icon type="plus" />添加文件</a-button>
        </a-upload>
      </div>
      <div class="tipBox" v-if="!callback">
        <a-row style="color: #252525;font-size: 16px;font-weight: 500">
          温馨提示
        </a-row>
        <a-row>
          <a-col :span="12">
            <span style="padding-right: 5px">
              首先下载标准模板，填写信息后再上传
            </span>
            <a-button type="link" @click="download" class="primary_color" style="font-size: 12px">点击下载模板</a-button>
            <!-- <div>1.支持WPS、excel2003以上版本文件</div> -->
            <div class="rowMargin">1.所属分组、渠道名称、联系电话为必填项，顺序可调整，但不可删除</div>
            <div class="rowMargin">2.若Excel文件设有权限密码，需取消Excel文件密码，否则系统无法识别</div>
            <div class="rowMargin">3.单次导入数据上限为1000条</div>
          </a-col>
        </a-row>
      </div>
      <div v-if="callback">
        <div style="padding-left:24px;padding-right:24px;">
          <div
            style="margin-top:15px;padding-left:10px;display: flex;
      flex-flow: row;align-items: center;height: 35px;width:100%;background-color:#FFFBE6;border-style:solid;
    border-color:#FFE58F;border-width:1px;border-radius:5px;"
          >
            <!-- <img
              style="width:16px;height:16px;margin-right:5px;
                  "
              src="../../../assets/icons/重复.png"
            /> -->
            <span sytle="color:#55565D;font-size:14px;"
              >共{{ count }}条数据，成功导入{{ succ }}条数据，<label class="redc">{{ fial }}</label
              >条数据导入失败。</span
            >
          </div>
        </div>
        <div class="header-title-box">
          <div class="headerTitle">
            <div class="block" />
            <div style="font-size:15px;font-weight:700;font-color:#252525;">错误信息</div>
          </div>
          <div class="btn-box">
            <a-button :disabled="!downloadurl" type="primary" @click="buCha">
              导出错误数据
            </a-button>
          </div>
        </div>
        <a-table
          style="padding-left:24px;padding-right:24px;"
          :columns="columnDetail"
          :pagination="pagination"
          :data-source="dataDetail"
          :scroll="{ x: 800 }"
          @change="handleTableChange"
        >
          <template slot="errorReason" slot-scope="text">
            <a-tooltip placement="topLeft">
              <template slot="title">
                <span>{{ text }}</span>
              </template>
              <span style="color:#ff0000">{{ text }}</span>
            </a-tooltip>
          </template>
          <template slot="name" slot-scope="text, record">
            <span v-if="record.errorField === 'name'" style="color:#ff0000">{{ text }}</span>
            <span v-else>{{ text }}</span>
          </template>
          <template slot="idcard" slot-scope="text, record">
            <span v-if="record.errorField === 'idcard'" style="color:#ff0000">{{ text }}</span>
            <span v-else>{{ text }}</span>
          </template>
          <template slot="phone" slot-scope="text, record">
            <span v-if="record.errorField === 'phone'" style="color:#ff0000">{{ text }}</span>
            <span v-else>{{ text }}</span>
          </template>
          <template slot="address" slot-scope="text, record">
            <span v-if="record.errorField === 'address'" style="color:#ff0000">{{ text }}</span>
            <span v-else>{{ text }}</span>
          </template>
          <template slot="bankNo" slot-scope="text, record">
            <span v-if="record.errorField === 'bankNo'" style="color:#ff0000">{{ text }}</span>
            <span v-else>{{ text }}</span>
          </template>
          <template slot="groupName" slot-scope="text, record">
            <span v-if="record.errorField === 'groupName'" style="color:#ff0000">{{ text }}</span>
            <span v-else>{{ text }}</span>
          </template>
        </a-table>
      </div>

      <a-modal v-model="dialogFailVisible" title="批量导入" width="500px" @ok="handleFailClose">
        <template slot="footer">
          <a-button key="submit" type="primary" @click="handleFailClose">
            确定
          </a-button>
        </template>
        <div
          style="padding-left:10px;display: flex;
  flex-flow: row;align-items: center;height: 35px;width:100%;"
        >
          <!-- <img
            style="width:25px;height:25px;margin-right:10px;
                  "
            src="../../../assets/icons/duihao.png"
          /> -->
          <div style="color:#3C3D43;font-size:15px;font-weight:700">共{{ count }}条数据，全部导入成功！</div>
        </div>
      </a-modal>
    </div>
  </a-spin>
</template>
<script>
import UploadMixin from "xqjr-plugin-common/UploadOrExport/uploadMixin";
import { mapState } from "vuex";
import moment from "moment";
const mixin = new UploadMixin();
const formalType = ["试用", "正式", "实习"];
const columnDetail = [
  {
    title: "错误信息",
    dataIndex: "reason",
    fixed: "left",
    scopedSlots: { customRender: "reason" },
    ellipsis: true,
    width: 260
  }
];
import axios from "axios";
import qs from "qs";
export default {
  mixins: [mixin],
  data() {
    return {
      count: 0,
      succ: 0,
      fial: 0,
      formalType,
      pagination: {
        pageSize: 10,
        total: 0,
        current: 1,
        showQuickJumper: true
      },
      dataDetail: [],
      callback: false,
      dialogFailVisible: false,
      downloadurl: undefined,
      columnDetail,
      uploadImg: require("@/assets/img/uploadImg.png"),
      params: {
        templateName: "channelInfoImportTemplate.xlsx"
      },
      url: `/hr/api/v1/excel/template/download`,
      excelName: "渠道上传模板.xlsx"
    };
  },

  created() {
    const companyId = this.$store.state.hr.companyId;
    this.action = `/hr/api/v1/channels/importChannel`;
  },
  computed: {
    ...mapState(["common"]),
    cityList() {
      return this.common.cityList;
    },
    areaList() {
      return this.common.areaList;
    }
  },
  methods: {
    handleSuccess(res) {
      var that = this;
      if (res.success && res.data !== null) {
        var numAll = res.data.importFil.length + res.data.importSuc.length;
        var numFail = res.data.importFil.length;
        const numSuc = res.data.importSuc.length;
        if (that.showFaild) {
          that.Faildata = res.data.importFil;
          that.Faildata.forEach((item, index) => {
            item = Object.assign(item, item.allMap);
          });
          that.showFaild(numAll, numSuc, numFail, that.Faildata, res.data.failPath);
        } else {
          if (numFail === 0) {
            this.$confirm({
              okText: "确定",
              title: `共导入${numAll}人，${numSuc}人成功，${numFail}人未成功`,
              onOk() {
                that.goback();
              },
              onCancel() {
                that.goback();
              }
            });
          } else {
            this.$confirm({
              okText: "确定",
              cancelText: "查看未成功名单",
              title: `共导入${numAll}人，${numSuc}人成功，${numFail}人未成功`,
              onOk() {
                that.goback();
              },
              onCancel() {
                that.Faildata = res.data.importFil;
                that.dialogFailVisible = true;
              }
            });
          }
        }
      } else if (res.data === null) {
        this.$confirm({
          okText: "确定",
          title: res.msg
        });
      } else {
        this.$notification["error"]({
          message: "error",
          description: res.msg || "上传失败"
        });
        setTimeout(() => {
          this.reset();
        }, 2000);
      }
    },

    buCha() {
      window.open(this.downloadurl + `?token=${this.$store.state.auth.token}`);
    },
    isGoBack() {
      if (this.callback) {
        this.callback = false;
      } else {
        this.goback();
      }
    },
    handleUploadError() {
      this.$message.warning("没有文件");
    },
    handleFailClose() {
      this.dialogFailVisible = false;
      this.uploading = false;
      this.goback();
    },

    handleTableChange(pagination, filters, sorter) {
      this.pagination.current = pagination.current;
    },
    buildValue(id, needRecursion = true) {
      id = parseInt(id);
      const index = this.common.areaSourceList.findIndex(item => item.id === parseInt(id));
      if (index > -1) {
        const item = this.common.areaSourceList[index];
        const val = {
          value: id,
          label: item.name
        };
        if (needRecursion && item.parentId > 0) {
          return this.buildValue(item.parentId).concat([val]);
        } else {
          return [val];
        }
      }
      return [];
    },
    getLastAreaId(values) {
      if (Array.isArray(values)) {
        return values[values.length - 1];
      } else {
        return values.split(",").slice(-1)[0];
      }
    },
    showFaild(numAll, numSuc, numFail, Faildata, downloadurl) {
      this.columnDetail = [
        {
          title: "错误信息",
          dataIndex: "errorReason",
          scopedSlots: { customRender: "errorReason" },
          ellipsis: true,
          fixed: "left",
          width: 260
        },
        {
          title: "所属分组",
          dataIndex: "groupName",
          scopedSlots: { customRender: "groupName" },
          ellipsis: true,
          width: 260
        },
        {
          title: "渠道名称",
          dataIndex: "name",
          scopedSlots: { customRender: "name" },
          ellipsis: true,
          width: 260
        },
        {
          title: "联系电话",
          dataIndex: "phone",
          scopedSlots: { customRender: "reason" },
          ellipsis: true,
          width: 260
        },
        {
          title: "所在地区",
          dataIndex: "address",
          scopedSlots: { customRender: "address" },
          ellipsis: true,
          width: 260
        },
        {
          title: "身份证号",
          dataIndex: "idcard",
          scopedSlots: { customRender: "idcard" },
          ellipsis: true,
          width: 260
        },
        {
          title: "银行卡号",
          dataIndex: "bankNo",
          scopedSlots: { customRender: "bankNo" },
          ellipsis: true,
          width: 260
        }
      ];
      this.count = numAll;
      this.succ = numSuc;
      this.fial = numFail;
      this.dataDetail = Faildata;
      // this.dataDetail.forEach(element => {
      //   if (element.address) {
      //     const values = this.buildValue(this.getLastAreaId(element.address));
      //     const labels = values.map(item => item.label);
      //     element.address = labels.join("-");
      //   }
      // });
      if (this.count === this.succ) {
        this.dialogFailVisible = true;
      } else {
        this.callback = true;
      }
      this.downloadurl = downloadurl;
      // columns.forEach((item, index) => {
      //   this.columnDetail.push({
      //     title: `${item}`,
      //     dataIndex: `${item}`,
      //     align: "center",
      //     width: item === "身份证号" ? 220 : 150,
      //     scopedSlots: { customRender: `${item}` },
      //     ellipsis: true
      //     // fixed: item === "身份证号" || item === "姓名" ? "left" : null
      //   });
      // });
    },
    getMaritalStatus(maritalStatus) {
      if (maritalStatus === 1) {
        return "已婚";
      } else if (maritalStatus === 2) {
        return "未婚";
      } else if (maritalStatus === 3) {
        return "离异";
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.header-title-box {
  padding-left: 24px;
  padding-right: 24px;
  margin-top: 10px;
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .headerTitle {
    display: flex;
    justify-content: flex-start;
    .block {
      width: 3px;
      height: 20px;
      margin-top: 2px;
      background-color: var(--primary);
      margin-right: 12px;
    }
  }
}
.uplaodBoxB {
  padding-bottom: 24px;
  .head {
    background-color: #fff;
    .anticon-left {
      z-index: 3;
      left: 24px;
      position: absolute;
      color: #595959;
      font-size: 20px;
      margin-top: 21px;
      color: #c0c0c0;
    }
    .left2 {
      z-index: 3;
      left: 45px;
      position: absolute;
      font-size: 14px;
      cursor: pointer;
      color: #c0c0c0;
    }
    font-size: 16px;
    color: #000;
    font-weight: 500;
    text-align: center;
    line-height: 60px;
    height: 60px;
    border-bottom: 1px solid #e8e8e8;
  }
  .exportTitle {
    text-align: center;
    font-size: 16px;
    font-weight: 500;
    color: #252525;
  }
  .left2 {
    z-index: 3;
    left: 50px;
    position: absolute;
    color: #595959;
    font-size: 14px;
  }
  .anticon-left {
    z-index: 3;
    left: 24px;
    position: absolute;
    color: #d8d8d8;
    font-size: 26px;
    margin-top: 17px;
  }
  .tipBox {
    line-height: 18px;
    background: #faf9f9;
    border-radius: 4px;
    font-size: 12px;
    color: #595959;
    margin: 0 24px;
    padding: 12px;
    height: 185px;
  }
  .rowMargin {
    margin-top: 4px;
  }
  .ant-upload-select-text-box {
    border: 1px dashed #b8b8b8;
    background: #fff;
    margin: 24px;
    text-align: center;
    cursor: pointer;
    border-radius: 4px;
    padding: 12px;
  }
  .ant-upload-select-text-box ::v-deep .ant-upload-list {
    display: none;
  }
  .ant-upload-list-item-name {
    text-align-last: left;
  }

  .anticon-upload {
    font-size: 40px;
  }

  .ant-modal-body {
    line-height: 20px;

    em {
      color: var(--primary);
      font-style: normal;
    }
  }
}
.redc {
  color: red;
}
</style>
